<template>
    <div class="btn" v-loading="loading">
        <div class="log_box">
            <el-form ref="ruleFormRef" :model="data.ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="data.ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="data.ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">立即登录</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { LoginData } from '@/type/login.ts'
import request from '@/utils/request.ts'
const ruleFormRef = ref<FormInstance>()
import { ElMessage } from 'element-plus'
const router = useRouter()
const loading = ref(false)
let data = reactive(new LoginData())
console.log(data.ruleForm, '111111111111');

let rules = reactive({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 8, message: '账号长度要在3-8', trigger: 'blur' },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
        { min: 5, max: 16, message: '账号长度要在5-16', trigger: 'blur' },
    ],
})
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // console.log('submit!')
            loading.value = true
            //   调用登录接口
            request.post('/api/user/login', {...data.ruleForm,}).then((res) => {
                console.log(res);
                if (res.code === 200) {
                    loading.value = false
                    // 储存token
                    localStorage.setItem('token',res.data.token)
                    ElMessage({
                        type: 'success',
                        message: "登陆成功",
                    })
                    // 登陆成功后一秒进入首页
                    setTimeout(() => {
                        router.push('/')
                    }, 1000);
                } else {
                    loading.value = false
                    ElMessage({
                        type: 'error',
                        message: "密码错误",
                    })
                }
            }).catch((error) => {
                console.log(error);
                ElMessage({
                    type: 'error',
                    message: "登陆失败",
                })
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const resetForm = () => {
    data.ruleForm.password = ''
    data.ruleForm.username = ''
}
</script>

<style scoped>
.btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: url(https://lrms.zhetao.com/common-uploads/2021/7/up_1625663286114529_0.jpg) no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}

.log_box {
    width: 400px;
    background: white;
    height: 300px;
    box-shadow: 3px 3px 10px 5px rgb(12, 95, 163);
    border-radius: 12px;
    position: fixed;
    top: 40%;
    right: 10%;
    display: flex;
    justify-self: center;
    align-items: center;
}
</style>